<template>
  <li :class="{'digui-active' : isShowUpDownArrow === inDexLv}">
    <div @click="clickItem3">
      <span>{{model.name}}</span>
      <span>权重:{{model.weight}} | </span>
      <span>层次:{{lv}} | </span>
      <span>id:{{id}} | </span>
      <span>parentid: {{model.parentid}} | </span>
      <span><button @click.stop="prevAdd" v-if="lv < 10">增加指标</button></span>
      <span><button @click="dele">删除指标</button></span>
      <span><button @click="modiName">修改名称</button></span>
      <div style="position:fixed;bottom:30px;right:10px;" v-show="isShowUpDownArrow === inDexLv">
        <span @click.stop="moveU">上移</span>
        <span @click.stop="moveD">下移</span>
      </div>
    </div>
    <ul v-if="isFolder">
      <items
      :id="cel.id"
      @clickItem="clickItem2"
      :isShowUpDownArrow="isShowUpDownArrow"
      :key="index"
      :addItems="addItems"
      @add="add2"
      @dele = "dele2"
      @modiName = "modiName2"
      @moveU="moveUf(index)"
      @moveD="moveDf(index)"
      :lv="lv+1"
      v-for="(cel, index) in model.childer"
      :model="cel"></items>
    </ul>
  </li>
</template>

<script>
  export default {
    name: 'items',
    props: ['model', 'lv', 'id', 'isShowUpDownArrow', 'addItems'],
    components: {},
    data() {
      return {
      }
    },
    computed: {
      isFolder() {
        return this.model.childer && this.model.childer.length
      },
      inDexLv () {
        return this.id
      }
    },
    methods: {
      prevAdd() {
        this.$emit('add', this.add, this.id)
      },
      add (data) {
        this.model.childer = this.model.childer.concat(data)
      },
      add2 (fn, id) {
        this.$emit('add', fn, id)
      },
      dele () {
        this.$emit('dele', this.id)
      },
      dele2 (id) {
        this.model.childer = this.model.childer.filter(u => u.id !== id)
      },
      modiName () {
        this.$emit('modiName', this.midiFn)
      },
      modiName2 (fn) {
        this.$emit('modiName', fn)
      },
      midiFn (name) {
        this.model.name = name
      },
      moveU () {
        this.$emit('moveU')
      },
      moveD () {
        this.$emit('moveD')
      },
      moveUf (index) {
        if (index === 0) {
          alert('已经是第一位')
        } else {
        const obj = this.model.childer[index]
        this.model.childer.splice(index, 1)
        this.model.childer.splice(index - 1, 0, obj)
        }
      },
      moveDf (index) {
        if (index === this.model.childer.length - 1) {
          alert('已经是最后一位')
        } else {
        const obj = this.model.childer[index]
        this.model.childer.splice(index, 1)
        this.model.childer.splice(index + 1, 0, obj)
        }
      },
      clickItem3 () {
        this.$emit('clickItem', this.inDexLv)
      },
      clickItem2 (id) {
        this.$emit('clickItem', id)
      }
    }
  }
</script>

<style>
  .digui-active{
    border: 1px dashed lightskyblue;
  }
</style>